<template>
	<view>
		<view class="search">
			<u-search
				@search="getInput"
				@blur="getInput"
				@clear="inputClear"
				:value="address"
				class="field"
				:showAction="false"
				placeholder="门店搜索"
				clearable
				custom-class="search-input"
			></u-search>
			<view class="search-action" @tap="selectRegion">{{ select_address == '' ? '选择地区' : select_address }}</view>
		</view>

		<u-popup :show="show" position="bottom" closeable @close="onClose" :close-on-click-overlay="false">
			<view class="content">
				<view class="title">请选地区</view>
				<view class="select-address-title">
					<view v-if="selectData.province != ''" @tap="select" data-selectIndex="0" class="address-title-item">
						<view>{{ selectData.province }}</view>
					</view>
					<view v-if="selectData.city != ''" @tap="select" data-selectIndex="1" class="address-title-item">
						<view>{{ selectData.city }}</view>
					</view>
					<view v-if="selectData.area != ''" @tap="select" data-selectIndex="2" :class="'address-title-item ' + (selectData.area != '' ? 'address-title-select' : '')">
						<view>{{ selectData.area }}</view>
						<view v-if="selectData.area != ''" class="address-bottom-select"></view>
					</view>
					<view v-if="selectData.area == ''" class="address-title-item address-title-select">
						<view>请选择</view>
						<view class="address-bottom-select"></view>
					</view>
				</view>
				<swiper style="width: 100%; height: calc(80vh - 180rpx)" :indicator-dots="false" :current="selectIndex" :duration="300">
					<swiper-item @touchmove.stop.prevent="onTouchMove">
						<scroll-view :scroll-y="true" style="height: calc(80vh - 180rpx)">
							<view class="address-item" @tap="selectItem" :data-item="item" data-selectIndex="1" v-for="(item, index) in province" :key="index">
								<view class="address-left">{{ item.name }}</view>

								<view class="address-right"><u-icon size="32rpx" color="#666" name="arrow-right" /></view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item @touchmove.stop.prevent="onTouchMove">
						<scroll-view :scroll-y="true" style="height: calc(80vh - 180rpx)">
							<view class="address-item" @tap="selectItem" :data-item="item" data-selectIndex="2" v-for="(item, index) in city" :key="index">
								<view class="address-left">{{ item.name }}</view>

								<view class="address-right"><u-icon size="32rpx" color="#666" name="arrow-right" /></view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item @touchmove.stop.prevent="onTouchMove">
						<scroll-view :scroll-y="true" style="height: calc(80vh - 180rpx)">
							<view class="address-item" @tap="selectItem" :data-item="item" data-selectIndex="3" v-for="(item, index) in area" :key="index">
								<view class="address-left">{{ item.name }}</view>

								<view class="address-right"><u-icon size="32rpx" color="#666" name="arrow-right" /></view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</u-popup>
	</view>
</template>

<script>
const $return = require('../../request/api/v1/returnGood.js');

export default {
	data() {
		return {
			selectIndex: 0,
			show: false,
			address: '',
			oldAddress: '',
			select_address: '',
			province: [],
			city: [],
			area: [],
			selectData: {
				province: '',
				city: '',
				area: '',
				province_code: '',
				city_code: '',
				area_code: ''
			}
		};
	},
	options: {
		styleIsolation: 'shared'
	},
	props: {},
	watch: {
		address: {
			handler: function(e) {
				console.log(e);

				if (this.oldAddress != e) {
					this.oldAddress = e;
					this.$emit('searchInput', {
						detail: this.oldAddress
					});
				}
			},

			immediate: true,
			deep: true
		}
	},
	mounted: function() {
		this.getRegion();
	},
	methods: {
		getRegion() {
			$return.getRegion().then(res => {
				this.province = res;
			});
		},

		selectRegion() {
			const selectData = {
				province: '',
				city: '',
				area: '',
				province_code: '',
				city_code: '',
				area_code: ''
			};
			(this.selectData = selectData), (this.selectIndex = 0), (this.show = true), (this.select_address = '');
			this.$emit('regionInput', {
				detail: this.selectData
			});
		},

		select(e) {
			let { selectindex } = e.currentTarget.dataset;

			switch (Number(selectindex)) {
				case 0:
					this.selectData.province = '';
					this.selectData.city = '';
					this.selectData.area = '';
					break;

				case 1:
					this.selectData.city = '';
					this.selectData.area = '';
					break;

				default:
					break;
			}

			this.selectIndex= Number(selectindex)
		},

		selectItem(e) {
			let { selectindex, item } = e.currentTarget.dataset;
			let name = item.name;
			let code = item.id;

			switch (selectindex) {
				case '1':
					this.selectData.province = name;
					this.selectData.province_code = code;
					this.city = item.child;
					this.selectIndex = Number(selectindex);
					break;

				case '2':
					this.selectData.city = name;
					this.selectData.city_code = code;
					this.area = item.child;
					this.selectIndex = Number(selectindex);
					break;

				case '3':
					this.selectData.area = name;
					this.selectData.area_code = code;
					this.show = false;
					this.select_address = name;
					this.$emit('regionInput', {
						detail: this.selectData
					});
					break;

				default:
					break;
			}
		},

		onClose() {
			this.show = false;
		},

		getInput(val) {
			this.address = val;
		},

		inputClear() {
			this.address = '';
		},

		onTouchMove() {}
	}
};
</script>
<style>
@import './searchRegion.css';
</style>
